﻿
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
教室列表页
@*添加按钮*@
<div>
    <button type="button" id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addClassRoom">添加 </button>
</div>

@*表格*@
<table id="classRoomTable" class="table">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@*分页*@
<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>


@*添加对话框*@
<div class="modal fade" id="addClassRoom" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">添加教室</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">教室名称:</label>
                        <input type="text" class="form-control" id="ClassRoomName">
                        <label for="recipient-name" class="col-form-label">位置:</label>
                        <input type="text" class="form-control" id="position">
                        <label for="recipient-name" class="col-form-label">容量:</label>
                        <input type="text" class="form-control" id="capacity">
                        <label for="recipient-name" class="col-form-label">描述:</label>
                        <input type="text" class="form-control" id="description">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitAdd">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


@*编辑对话框*@
<div class="modal fade" id="editClassRoom" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">编辑教室</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">教室id:</label>
                        <input type="text" class="form-control" id="newClassRoomId">
                        <label for="recipient-name" class="col-form-label">教室名称:</label>
                        <input type="text" class="form-control" id="newClassRoomName">
                        <label for="recipient-name" class="col-form-label">位置:</label>
                        <input type="text" class="form-control" id="newPosition">
                        <label for="recipient-name" class="col-form-label">容量:</label>
                        <input type="text" class="form-control" id="newCapacity">
                        <label for="recipient-name" class="col-form-label">描述:</label>
                        <input type="text" class="form-control" id="newDescription">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitEdit">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>




@*确定删除对话框*@
<div class="modal fade" id="sureDel" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">删除教室</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确认删除吗?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="submitDel">确定</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>



@section Scripts{

       <script>
            loadpage()
            let g_rows
            let user = JSON.parse(sessionStorage.getItem('user'))

            function loadpage() {
                let s = sessionStorage.getItem('classRoomlist')

                if (s == [] || s == "" || s == null) {
                    $.ajax({
                        url: '/ClassRoom/GetClassRoomList',
                        type: 'get',
                        success: function (data) {
                            parseData(data)
                        },
                        error: function (err) {
                        }
                    })
                } else {
                    parseStorage(s)
                }

            }

            //解析请求数据并渲染到页面
            function parseData(data) {
                $('#classRoomTable thead tr').empty()
                $('#classRoomTable tbody tr').empty()
                let jsd = JSON.stringify(data)

                let head = JSON.parse(data.attr)
                head.push('操作')
                sessionStorage.setItem('classRoomlist_head', JSON.stringify(head))

                //渲染表头
                for (index in head) {
                    $('#classRoomTable thead tr').append('<th>' + head[index] + '</th>')
                }

                let rows = JSON.parse(data.row)
                g_rows = rows
                sessionStorage.setItem('classRoomlist', JSON.stringify(rows))

                

                //渲染表格
            $(rows).each(function (index, ele) {
                $('#classRoomTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#classRoomTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }

                $('#classRoomTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" onclick="edit(this)" data-bs-toggle="modal" data-bs-target="#editClassRoom">编辑</button>' +
                    '<button class="delBtn" onclick="del(this)" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#classRoomTable tbody tr td:last').attr({ 'classRoomId': ele.ClassRoomId })
            })

            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
            }



            //解析缓存并加载到表格
            function parseStorage(data) {
                $('#classRoomTable thead tr').empty()
                $('#classRoomTable tbody tr').empty()
                let headStorage = sessionStorage.getItem('classRoomlist_head')
                let head = JSON.parse(headStorage)
                //渲染表头
                for (index in head) {
                    $('#classRoomTable thead tr').append('<th>' + head[index] + '</th>')
                }

                //渲染表格
            let rows = JSON.parse(data)
            
            $(rows).each(function (index, ele) {
                $('#classRoomTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#classRoomTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#classRoomTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" data-bs-toggle="modal" data-bs-target="#editClassRoom">编辑</button>' +
                    '<button class="delBtn" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#classRoomTable tbody tr td:last').attr({ 'officeid': ele.OfficeRoomId })
            })

            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
            }


            //刷新数据
            function refreshData() {
                $('#classRoomTable thead tr').empty()
                $('#classRoomTable tbody tr').empty()
                $.ajax({
                    url: '/ClassRoom/GetClassRoomList',
                    type: 'get',
                    success: function (data) {
                        parseData(data)
                    },
                    error: function (err) {
                    }
                })
            }


            //添加对话框“保存”按钮响应事件
            $('#submitAdd').click(function () {
                let classRoomName = $('#ClassRoomName').val()
                let position = $('#position').val()
                let capacity = $('#capacity').val()
                let description = $('#description').val()

                if (classRoomName=='')
                    return


                $.ajax({
                    url: '/ClassRoom/AddClassRoom',
                    type: "post",
                    data: {
                        RoomName: classRoomName,
                        Position: position,
                        Capacity: capacity,
                        Description: description,
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data == 0 || data == '0') {
                            alert("名称已存在")
                            return
                        }
                        if (data == -1 || data == '-1') {
                            alert("名称不能为空")
                            return
                        }
                        if (data == 1 || data == '1') {
                            refreshData()
                        }
                    }
                })
            })



            //第一次加载页面--“编辑”按钮响应事件
            function edit(e) {
                let classRoomId = $(e).parent().attr('classRoomid')
                let classRoom = g_rows.filter(function (d) {
                    return d.ClassRoomId == classRoomId
                })
                $('#newClassRoomId').val(classRoom[0].ClassRoomId)
                $('#newClassRoomId').attr({ 'disabled': 'disabled' })
                $('#newClassRoomName').val(classRoom[0].RoomName)
                $('#newPosition').val(classRoom[0].Position)
                $('#newCapacity').val(classRoom[0].Capacity)
                $('#newDescription').val(classRoom[0].Description)
            }

            //使用缓存--“编辑”按钮响应事件
            $('.editBtn').each(function (index) {
                $(this).click(function () {
                    let rows = JSON.parse(sessionStorage.getItem('classRoomlist'))
                    let classRoom = rows.filter(function (r, ind) {
                        return index == ind
                    })
                    $('#newClassRoomId').val(classRoom[0].ClassRoomId)
                    $('#newClassRoomId').attr({ 'disabled': 'disabled' })
                    $('#newClassRoomName').val(classRoom[0].RoomName)
                    $('#newPosition').val(classRoom[0].Position)
                    $('#newCapacity').val(classRoom[0].Capacity)
                    $('#newDescription').val(classRoom[0].Description)
                })
            })

            //编辑对话框中的“保存”按钮点击事件响应
            $('#submitEdit').click(function (index) {
                let ClassRoomId = $('#newClassRoomId').val()
                let RoomName = $('#newClassRoomName').val()
                let Position = $('#newPosition').val()
                let Capacity = $('#newCapacity').val()
                let Description = $('#newDescription').val()

                if (RoomName == '' ) {
                    //提示名称不能为空

                    return
                }

                $.ajax({
                    url: '/ClassRoom/EditClassRoom',
                    type: 'post',
                    data: {
                        ClassRoomId,
                        RoomName,
                        Position,
                        Capacity,
                        Description
                    },
                    success: function (data) {
                        if (data == 1) {
                            alert("修改成功")
                        }
                        else if (data == 0) {
                            alert('名称已存在!')
                        } else if (data == -1) {
                            alert('名称不能为空!')
                        }
                        //刷新表格
                        refreshData()
                        //关闭对话框
                        // ...
                    },
                    error: {

                    }
                })
            })

            //第一次加载页面--"删除"按钮响应事件
            let classRoomId
            function del(e) {
            classRoomId = $(e).parent().attr('classRoomid')
            }

            //缓存的数据--"删除"按钮点击事件响应
            $('.delBtn').each(function (index) {
                $(this).click(function () {
                    let stor = sessionStorage.getItem('classRoomlist')

                    let rows = JSON.parse(stor)
                    let tr = $(rows).filter(function (ind, ele) {
                        return ind == index
                    })
                     classRoomId = tr[0].ClassRoomId
                })
            })


            //"删除"对话框--"确定"按钮响应事件
            $('#submitDel').click(function () {
            let delId = classRoomId;
                if (delId <= 0) {
                    return
                }

                $.ajax({
                    url: '/ClassRoom/DelClassRoom',
                    type: 'post',
                    data: {
                        ClassRoomId: delId
                    },
                    success: function (data) {
                        if (data == 1) {
                            alert("删除成功")
                        }
                        else {
                            alert('删除失败!')
                        }
                        //刷新表格
                        refreshData()
                        //关闭对话框
                        // ...
                    },
                    error: {

                    }
                })
            })

       </script>

}